<template>
    <div>
        <el-dialog
            width="60%"
            :title="!form.id ? '新增' : '修改'"
            :visible.sync="visible"
            :close-on-click-modal="false">

            <div class="table_form_wrap">

                <el-form ref="form" :inline="false" :model="form" :rules="rules" @keyup.enter.native="handleSubmit()" label-width="150px">
                    <div class="form_scroll_wrap">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="部门" prop="deptIds">
                                    <DeptCascader
                                        ref="cascader_dept"
                                        :cascaderDeptVal.sync="cascaderDeptVal"
                                        :checkStrictly="true"
                                        :emitPath="false"
                                        :multiple="true"
                                        :clearable="false"
                                        styles="width: 80%">
                                    </DeptCascader>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="岗位" prop="postIds">
                                    <PostCascader
                                        ref="cascader_post"
                                        :cascaderPostVal.sync="cascaderPostVal"
                                        :checkStrictly="true"
                                        :emitPath="false"
                                        :multiple="true"
                                        :clearable="false"
                                        styles="width: 80%">
                                    </PostCascader>
                                </el-form-item>
                            </el-col>

                            <el-col :span="12">
                                <el-form-item label="工号" prop="workNo">
                                    <el-input placeholder="" v-model="form.workNo" clearable style="width: 80%"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="姓名" prop="name">
                                    <el-input placeholder="" v-model="form.name" clearable style="width: 80%"></el-input>
                                </el-form-item>
                            </el-col>

                            <el-col :span="12">
                                <el-form-item label="性别" prop="sex">
                                    <DictSelect code="XB" :selectVal.sync="form.sex"></DictSelect>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="出生日期" prop="birthday">
                                    <el-date-picker
                                        style="width: 80%"
                                        v-model="form.birthday"
                                        type="date"
                                        placeholder="选择日期"
                                        value-format="yyyy-MM-dd">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="在职状态" prop="status">
                                    <DictSelect code="YGZT" :selectVal.sync="form.status"></DictSelect>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="工作状态" prop="workStatus">
                                    <DictSelect code="GZZT" :selectVal.sync="form.workStatus"></DictSelect>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="入职日期" prop="startDate">
                                    <el-date-picker
                                        style="width: 80%"
                                        v-model="form.startDate"
                                        type="date"
                                        placeholder="选择日期"
                                        value-format="yyyy-MM-dd">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="离职日期" prop="endDate">
                                    <el-date-picker
                                        style="width: 80%"
                                        v-model="form.endDate"
                                        type="date"
                                        placeholder="选择日期"
                                        value-format="yyyy-MM-dd">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="来源" prop="source">
                                    <DictSelect code="LY" :selectVal.sync="form.source"></DictSelect>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="毕业院校" prop="university">
                                    <el-input placeholder="" v-model="form.university" clearable style="width: 80%"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="专业" prop="major">
                                    <el-input placeholder="" v-model="form.major" clearable style="width: 80%"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="学历" prop="educationLevel">
                                    <el-input placeholder="" v-model="form.educationLevel" clearable style="width: 80%"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="毕业时间" prop="graduatTime">
                                    <el-date-picker
                                        style="width: 80%"
                                        v-model="form.graduatTime"
                                        type="year"
                                        placeholder="选择年">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="日语等级" prop="japaneseGrade">
                                    <DictSelect code="JP_LEVEL" :selectVal.sync="form.japaneseGrade"></DictSelect>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="英语等级" prop="englishGrade">
                                    <DictSelect code="EN_LEVEL" :selectVal.sync="form.englishGrade"></DictSelect>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="联系电话" prop="telephone">
                                    <el-input placeholder="" v-model="form.telephone" clearable style="width: 80%"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="家庭电话" prop="phoneNo">
                                    <el-input placeholder="" v-model="form.phoneNo" clearable style="width: 80%"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="邮箱" prop="email">
                                    <el-input placeholder="" v-model="form.email" clearable style="width: 80%"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="身份证号码" prop="idCardNo">
                                    <el-input placeholder="" v-model="form.idCardNo" clearable style="width: 80%"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="籍贯" prop="nativePlace">
                                    <el-input placeholder="" v-model="form.nativePlace" clearable style="width: 80%"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="婚姻状况" prop="marriageStatus">
                                    <DictSelect code="HYZZ" :selectVal.sync="form.marriageStatus"></DictSelect>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="户口所在地" prop="domicilePlace">
                                    <el-input placeholder="" v-model="form.domicilePlace" clearable style="width: 80%"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="户口性质" prop="domicileProp">
                                    <el-input placeholder="" v-model="form.domicileProp" clearable style="width: 80%"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="备注" prop="remarks">
                                    <el-input v-model="form.remarks" type="textarea" :rows="4" clearable placeholder="备注..." style="width: 91.5%;"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </el-form>
            </div>


            <div slot="footer" class="dialog-footer">
                <el-button @click="visible = false">取 消</el-button>
                <el-button @click="handleSubmit()" type="primary" :submitLoading="submitLoading">提 交</el-button>
            </div>

        </el-dialog>
    </div>
</template>

<script>
import DeptCascader from '@/views/hr/dept/components/edit-dept-cascader-multiple'
import PostCascader from '@/views/hr/post/components/edit-post-cascader-multiple'
import DictSelect from '@/views/system/sysdict/components/dict-select'
export default {
    components: {
        DeptCascader,
        PostCascader,
        DictSelect
    },
    data() {
        return {
            visible: false,
            submitLoading: false,

            form: {
                deptIds: null,
                postIds: null,
                workNo: null,
                name: null,
                sex: null,
                post: null,
                startDate: null,
                endDate: null,
                source: null,
                workStatus: '1',
                university: null,
                major: null,
                educationLevel: null,
                graduatTime: null,
                japaneseGrade: null,
                englishGrade: null,
                idCardNo: null,
                nativePlace: null,
                birthday: null,
                marriageStatus: null,
                domicilePlace: null,
                domicileProp: null,
                telephone: null,
                phoneNo: null,
                email: null,
                status:'1',
                remarks: null
            },

            rules: {
                workNo: [{required: true, message: '工号不能为空', trigger: 'blur'}],
                name: [{required: true, message: '姓名不能为空', trigger: 'blur'}],
                startDate: [{required: true, message: '入职日期不能为空', trigger: 'blur'}],
                telephone: [{required: true, message: '联系电话不能为空', trigger: 'blur'}],
                status: [{required: true, message: '在职状态不能为空', trigger: 'blur'}],
                workStatus: [{required: true, message: '工作状态不能为空', trigger: 'blur'}],
            },
            cascaderDeptVal: [],
            cascaderPostVal: [],
        }
    },

    watch: {
        cascaderDeptVal(val) {
            this.form.deptIds = val;
        },
        cascaderPostVal(val) {
            this.form.postIds = val;
        }
    },

    methods: {
        init(id) {
            const refs = this.$refs
            // 情况表单数据
            this.form.id = id || null
            this.cascaderDeptVal = []
            this.cascaderPostVal = []
            this.visible = true

            this.$nextTick(() => {
                refs['form'].resetFields()
                if (this.form.id) {
                    setTimeout(() => {
                        this.getInfo(this.form.id)
                    }, 500);
                }
            })
        },

        /**
         * 详细信息
         */
        async getInfo(id) {
            this.submitLoading = true
            if (id) {
                const res = await this.$http({
                    url: '/hr/employee/info/' + id,
                    method: 'GET'
                })
                if (this.ResultMessage(res, false)) {
                    this.form = Object.assign({}, res.data)

                    if(this.form.deptIds) {
                        this.cascaderDeptVal = this.form.deptIds.split(',');
                    }
                    if(this.form.postIds) {
                        this.cascaderPostVal = this.form.postIds.split(',');
                    }
                }

            }
        },

        /**
         * 提交表单
         */
        async handleSubmit() {
            const refs = this.$refs
            this.submitLoading = true
            const valid = await refs['form'].validate().catch(() => {})
            if (valid) {

                if(undefined == this.form.deptIds || !this.form.deptIds) {
                    this.$message({ type: 'error', message: '请选择部门' }); return
                }
                if(undefined == this.form.postIds || !this.form.postIds) {
                    this.$message({ type: 'error', message: '请选择岗位' }); return
                }

                // 将部门，岗位IDS转换为字符串
                this.form.deptIds = this.form.deptIds.join(',')
                this.form.postIds = this.form.postIds.join(',')

                const res = await this.$http({
                    url: `/hr/employee/${!this.form.id ? 'save' : 'update'}`,
                    method: 'POST',
                    data: this.form
                })
                if (this.ResultMessage(res)) {
                    this.$emit('refreshDataList')
                    this.submitLoading = false
                    this.visible = false
                } else {
                    this.submitLoading = false
                }
            } else {
                this.submitLoading = false
            }
        }

    }
};
</script>

<style lang="scss" scoped>

</style>
